<template>
  <div id="homeheader">
    <div style="display: flex;">
      <!-- <div class="logo">
        <img src="../../assets/img/nepmLogo.gif" />
      </div> -->
      <div class="title">
        <p>环保公众监督系统</p>
      </div>
    </div>
    <div style="display: flex; align-items: center; font-size: 20px;">
      <el-dropdown @command="handleCommand">
        <el-avatar v-if="!avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <el-avatar v-if="avatar" :src="imgUrl" />
        <el-button>
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu class="custom-dropdown">
            <el-dropdown-item command="UploadAvatarCopy">更换头像</el-dropdown-item>
            <!-- <el-dropdown-item command="login">退出登录</el-dropdown-item> -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div >&nbsp;你好：{{ username }}</div>
      <el-button :icon="SwitchButton" @click="toLogin">退出登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { SwitchButton } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const handleCommand = (command) => {
  router.push(`/${command}`);
};

const toLogin = () => {
  router.push('/login');
};

const user = JSON.parse(sessionStorage.getItem('user') || '{}');
const username = ref(user.username || '用户');

const avatar = sessionStorage.getItem('avatar') || null;
const imgUrl = sessionStorage.getItem('imgUrl') || '';
</script>

<style lang="scss" scoped>
#homeheader {
  display: flex;
  justify-content: space-between;

  .title {
    p {
      line-height: 80px;
      margin-left: 18px;
      font-family: '微软雅黑', Courier, monospace;
      font-size: 1.8rem;
      color: rgb(0, 0, 0);
    }
  }
  .el-button {
    margin-left: 10px;
  }
}

</style>
